<template>
  <div class="shopindexheader">
    <div class="header">
      <div class="left">
        <img
          src="../assets/img/logo.png"
          alt=""
          class="logo"
          @click="GoToIndex"
        >
      </div>
      <div class="center">
        <el-select
          v-model="select"
          placeholder="宝贝"
          class="serch-select"
          size="mini"
          @change="SelectChange"
        >
          <el-option
            label="店铺"
            value="1"
          />
          <el-option
            label="宝贝"
            value="2"
          />
        </el-select>
        <el-input
          v-model="input1"
          class="serch-input"
          placeholder="输入你的关键字"
          size="mini" 
        >
          <!-- @change="InputChange" -->
          <!-- @input="InputInput" -->
          <el-button
            slot="suffix"
            icon="el-icon-search"
            circle
            @click="Search"
          />
        </el-input>
      </div>
      <div class="right">
        <div class="iconGroup">
          <img
            src="../assets/img/2.png"
            alt=""
            @click="person"
          >
          <img
            src="../assets/img/3.png"
            alt=""
            @click="gohome"
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {
    pagerstyle: {
      type: String,
      default: "",
    },
    pagetShopID:{
      type: String,
      default: "",
    },
    pagetStatus:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showSearch: false,
      falgs: false,
      activeIndex: "1",
      classify: [
        {
          name: "首页",
          id: "1",
          path: "/",
        },
      ],
      select: "1", // 搜索店铺/商品
      input1: "", // 搜索内容

    };
  },
  watch: {
    $route: function() {
      console.log('ShopIndexHeader', this.$route.path, this.$route)
      if(this.$route.path === '/shopindex') {
        this.select = "1" // 搜索店铺/商品
        this.input1 = "" // 搜索内容
      } else {
        return false
      }
    }
  },
  mounted() {},
  methods: {
    changeitem(item) {
      this.activeIndex = item.id;
      this.$router.push({
        path: "/cate",
        query: {
          id: item.id,
        },
      });
    },
    person() {
      if (localStorage.getItem("token")) {
        this.activeIndex = "";
        this.$router.push({
          path: "/person",
        });
      } else {
        // let url = encodeURIComponent(location.href.split('#')[0])
        // let url = encodeURIComponent("http://jtsc.hawkhawk.club/api/index/cas");
        // window.location.href =
        //   "http://issosit.ysyec.com/isso/login?service=" + url;
        let url = encodeURIComponent("https://mallmgt.inja.com/api/index/cas");
        window.location.href =
          "https://isso.inja.com/isso/login?service=" + url;
      }
    },
    gohome() {
      window.location.href = "https://inja.com/portal"; // 正式
      // window.location.href = "http://portalsit.ysyec.com/portal/#cancel=true" // 测试
    },
    Search() {
      console.log('搜索',this.select, this.input1)
      this.$router.push({
        path: "/searchpage",
        query: {
          select: this.select,
          input: this.input1,
          ShopID: sessionStorage.getItem("ShopID")
        },
      });
    },
    // 改变选择的值（1店铺，2宝贝）
    SelectChange(SelectChange){
      console.log('改变搜索的值', SelectChange)
      this.$router.push({
        path: "/searchpage",
        query: {
          select: SelectChange,
          input: this.input1,
          ShopID: sessionStorage.getItem("ShopID")
        },
      });
    },
    // 仅在输入框失去焦点或用户按下回车时触发
    InputChange(change) {
      console.log('仅在输入框失去焦点或用户按下回车时触发', change, this.select)
      this.$router.push({
        path: "/searchpage",
        query: {
          select: this.select,
          input: change,
          ShopID: sessionStorage.getItem("ShopID")
        },
      });
    },
    // 在 Input 值改变时触发
    InputInput(input) {
      console.log('在 Input 值改变时触发', input, this.select, this.pagetShopID,this)
      this.$router.push({
        path: "/searchpage",
        query: {
          select: this.select,
          input: input,
          ShopID: sessionStorage.getItem("ShopID")
        },
      });
    },
    // 点击logo回首页
    GoToIndex() {
      this.$router.push({
        path: "/",
      });
    },
    goShoppingCart() {
      this.$router.push({
        path: "/cart",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.shopindexheader {
  .header {
    height: 3.75rem;
    background: rgba(0, 0, 0, 1);
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3.75rem;
    z-index: 999;
    .logo {
      cursor: pointer;
    }
    .left {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .center {
      color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 40%;
      .serch-select {
        width: 16%;
      }
      .serch-select ::v-deep .el-input__inner {
        border-radius: 0;
        background: black;
        border: none;
        border-bottom: 1px solid white;
        color: white;
      }
      .serch-input ::v-deep .el-input__inner {
        border-radius: 0;
        background: black;
        border: none;
        color: white;
        border-bottom: 1px solid white;
      }
    }
    .right {
      height: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;

      .menu {
        width: 43rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .menu-item {
          cursor: pointer;
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          border-bottom: 1px solid #000;
          padding: 0.44rem 0;

          &.active {
            color: #08c19d;
            border-bottom: 1px solid #08c19d;
          }

          &:hover {
            color: #08c19d;
          }
        }
      }

      .searchInput {
        input {
          height: 2rem;
          line-height: 2;
          background: transparent;
          border-bottom: 0.06rem solid rgba(255, 255, 255, 0.6);
          width: 0;
          transition-duration: 0.5s;
          transition-property: all;
          transition-timing-function: ease;
          transition-delay: 0s;
          outline: none;
          color: #fff;
          font-size: 0.88rem;

          &.focus {
            width: 48rem !important;
          }
        }
      }

      .iconGroup {
        width: 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          cursor: pointer;
        }

        img {
          cursor: pointer;
          width: 1rem;
        }
      }
    }
  }
}
</style>
<style scoped>
.shop-show-l {
  border-right: 1px solid #e2e2e2;
  margin-right: 1rem;
}
.shop-title {
  margin: 1rem 0 0.4rem 0;
}
.shop-item {
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.shop-show-r {
  text-align: center;
  overflow: hidden;
}
.erwma {
  border: 1px solid #e2e2e2;
  padding: 0.2rem;
  font-size: 0.2rem;
  width: 9rem;
  margin: 1rem auto;
  font-weight: 400;
}
.erwma-logo {
  height: 8rem;
  width: 9rem;
  margin-bottom: 0.4rem;
}
.el-select-dropdown__item.selected {
  color: #08c19d;
}
.el-button.is-circle {
  background: none;
  border: none;
  color: #fff;
  padding: 0.6rem 0 0 0;
}
</style>